<template>
  <div id="cart-container">
    <van-empty
      v-show="cueBox"
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="暂无数据"
    />
    <van-checkbox-group v-model="result" v-show="!cueBox">
      <van-swipe-cell
        :right-width="50"
        v-for="(item, i) in goodsList"
        :key="item.id"
      >
        <div class="goods_item">
          <van-checkbox :name="item.id" @click="selectShop(item.id)" />
          <div class="goods_desc">
            <van-card
              :title="item.title"
              :desc="item.desc"
              :thumb="item.thumb_path"
              :num="item.count"
              :price="item.sell_price"
            >
              <template slot="bottom">
                <!-- 自定义底部，为了实现商品数量功能 -->
                <van-stepper @change="updateList(item)" v-model="item.count" />
              </template>
            </van-card>
          </div>
        </div>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item.id, i)"
          />
        </template>
      </van-swipe-cell>
    </van-checkbox-group>
    <van-submit-bar
      :price="$store.getters.shopSel.total * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll">
        全选
      </van-checkbox>
      <template #tip>
        累计共
        <span>{{ $store.getters.shopSel.count }}</span>
        件商品
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import imgUrl from '../../assets/logo.png'
import {
  ref,
  toRefs,
  reactive,
  watch,
  onMounted,
  nextTick
} from "vue";
import { useStore } from "vuex";
export default {
  name: "cart",
  setup() {
    const store = useStore(); // 使用vuex

    let checkedAll = ref(false);
    let goodsList = ref([]);

    let data = reactive({
      cueBox: false,
      result: []
    })

    watch(checkedAll, () => {  // 监听全选
      let all = [];
      goodsList.value.forEach(item => {
        if (checkedAll.value) {
          all.push(item.id);
        }
        store.commit("cart/updataSelected", {
          id: item.id,
          select: checkedAll.value
        })
      });
      data.result = all;
    })

    watch(goodsList, () => { // 监听是否有无数据
      if (goodsList.value.length > 0) {
        data.cueBox = false;
      } else {
        data.cueBox = true;
      }
    })

    onMounted(() => {
      nextTick(() => {
        document.querySelector(".van-submit-bar").style.display = "block";
      });
    })

    const selectShop = (id) => {  // 选中操作
      store.commit("cart/updataSelected", {
        id: id,
        select: !store.getters.shopSelect[id]
      })
    }

    const addCar = () => { // 添加购物车
      store.commit("cart/addToCar", {
        id: 2,
        title: "临时数据",
        desc: "描述",
        thumb_path: imgUrl,
        sell_price: 12.8,
        count: 10,
        select: false
      })
    }

    const getGoodsList = () => { // 获取购物车数据
      nextTick(() => {
        goodsList.value = store.getters.shopCar;
        data.result = store.getters.selectedRecords;
      });
    }

    const del = (id, i) => { // 删除购物车商品
      goodsList.value.splice(i, 1);
      store.commit("cart/remove", id);
    }

    const onSubmit = () => {
      console.log("提交操作");
    }

    const updateList = (item) => { // 更新商品数量
      store.commit("cart/updateList", item);
    }

    getGoodsList();

    // 使用toRefs函数对data对象进行包装，确保使用扩展运算符进行解构之后，仍具有响应式
    let param = toRefs(data);
    return {
      ...param,
      checkedAll,
      goodsList,
      // 方法
      addCar,
      getGoodsList,
      updateList,
      selectShop,
      del,
      onSubmit
    }
  }
};
</script>

<style lang="css" scoped>
#cart-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.van-checkbox-group {
  position: absolute;
  height: calc(100% - 88px);
  width: 100%;
  overflow: scroll;
}

.van-card__content {
  text-align: left;
}

.goods_item {
  padding: 0.1rem 0% 0.1rem 0.6rem;
  display: flex;
}

.goods_desc {
  flex: 1;
}

.van-submit-bar {
  display: none;
  bottom: 0px;
}

.van-stepper {
  text-align: right;
}

.delete-button {
  height: 100%;
}
</style>
